 <template>
	<div class="rating_container">
    <div class="star_container">
      <svg class="grey_fill">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star"></use>
      </svg>
    </div>
    <div class="star_overflow">
      <div class="star_container" >
        <svg  class="orange_fill">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star"></use>
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'RatingStar'
  }
</script>

<style lang="stylus" scoped>
	.rating_container
    position: relative
    top: .2rem
    width: 2rem
    height: 4rem
    .star_overflow
      overflow: hidden
      position: relative
      height: 100%
    .star_container
      position: absolute
      display: flex
      width: 2rem
      height: 0.4rem
      top: -0.02rem
      left: -0.02rem
      .grey_fill
        fill: #d1d1d1
      .orange_fill
        fill: #ff9a0d
</style>
